<template>
  <div class="s-section">
    <div class="flex">
      <div class="flex-1">扩展图表列表</div>
      <div class="flex-2">
        <a-input-search
          :style="{ width: '220px' }"
          placeholder="输入名称和编号按回车搜索"
        />
      </div>
    </div>
    <div>
      <a-table
        :data="data"
        style="margin-top: 30px"
        :row-selection="rowSelection"
        @select="handleSelect"
        @select-all="handleSelectAll"
      >
        <template #columns>
          <a-table-column title="序号" data-index="key"></a-table-column>
          <a-table-column
            title="扩展图表名称"
            data-index="name"
          ></a-table-column>
          <a-table-column
            title="扩展图表类型"
            data-index="type"
          ></a-table-column>
          <a-table-column title="操作人" data-index="operator"></a-table-column>
          <a-table-column
            title="操作时间"
            data-index="operatingTime"
          ></a-table-column>
          <a-table-column title="启用状态">
            <template #cell="{ record }">
              {{ record.isEnable ? '启用' : '停用' }}
            </template>
          </a-table-column>
          <a-table-column title="操作">
            <template #cell="{ record }">
              <div class="cursor-pointer" @click="edit(record.key)">编辑</div>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </div>
    传入的数据:{{ formConfig }}
  </div>
</template>

<script setup lang="ts">
import { computed, ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import type { prefabricatedType } from '../type' // 确保类型路径正确

const router = useRouter()
// 行选择逻辑
const rowSelection = ref({
  type: 'checkbox', // 可选 'checkbox' 或 'radio'
  showCheckedAll: true, // 显示全选按钮
})

// 单选事件
const handleSelect = (selected: string[], selectedRows: any[]) => {
  console.log('单选了数据', selected, selectedRows)
}

// 全选事件
const handleSelectAll = (selected: boolean) => {
  console.log('全选了数据', selected)
}
// 编辑跳转=
const edit = (key: string) => {
  console.log('编辑', key)
  router.push({
    name: 'ExpandChartDetail',
    params: { key }, // 确保 params 名称与路由定义一致
  })
}
// 传参逻辑
const props = defineProps({
  selectedItem: {
    type: Object as () => prefabricatedType | null, // 明确类型
    default: null,
  },
})

const formConfig = computed({
  get: () => props.selectedItem,
  set: (val) => {
    console.log(val)
  },
})
const data = reactive([
  {
    key: '1',
    name: '移动表格',
    type: 'table',
    operator: '系统管理员',
    operatingTime: '2024-05-01',
    isEnable: false,
  },
  {
    key: '2',
    name: '移动表格2',
    type: 'table',
    operator: '系统管理员',
    operatingTime: '2024-05-01',
    isEnable: false,
  },
])

console.log(formConfig)
</script>

<style lang="scss" scoped></style>
